<template>
  <div class="disposition">
    <div class="supervise_tc_c flexC colorF textC Bold bg_popout " style="margin-top: 2%; font-weight: bold;">
      <div class="flex flex2 JustifyContentSA" style=" margin: 3rem 0; ">
        <p class="flex2"></p>
        <div class="flex1 title_top " style="font-family:FZLanTingHei-B-GBK;font-weight:400;"><p class=" font_s40 colorF textC">分类监管频次</p></div>
        <p class="flex2"></p>
      </div>
      <img src="../../../assets/img/home/components/close.png" class="superviseClose" />
      <ul class="flex tb_list font_s20 Bold textC">
        <li class="flex1">机构等级</li>
        <li class="flex1">风险及信用情况</li>
        <li class="flex1">监管方式</li>
        <li class="flex1">监管频次</li>
      </ul>
      <div style="height: 80vh; margin: 0 5rem 1rem 5rem;" class="superviseList font_s20 Bold ">
        <ul class="flex tb_lists textC">
          <li class="flex1">5A级</li>
          <li class="flex1">整体良好</li>
          <li class="flex1">双随机</li>
          <li class="flex1">免检</li>
        </ul>

        <ul class="flex tb_lists textC">
          <li class="flex1">4A级</li>
          <li class="flex1">整体良好</li>
          <li class="flex1">双随机</li>
          <li class="flex1">一年一次</li>
        </ul>
        <ul class="flex tb_lists textC">
          <li class="flex1">3A级</li>
          <li class="flex1">整体较好</li>
          <li class="flex1">专项+全项</li>
          <li class="flex1">一年一次</li>
        </ul>
        <ul class="flex tb_lists textC">
          <li class="flex1">2A级</li>
          <li class="flex1">整体一般</li>
          <li class="flex1">专项+全项</li>
          <li class="flex1">一年一次</li>
        </ul>
        <ul class="flex tb_lists textC">
          <li class="flex1">1A级</li>
          <li class="flex1">整体一般</li>
          <li class="flex1">专项+全项</li>
          <li class="flex1">一年一次</li>
        </ul>

        <ul class="flex tb_lists textC">
          <li class="flex1">无等级</li>
          <li class="flex1">整体一般/较差</li>
          <li class="flex1">专项+全项</li>
          <li class="flex1">每季度一次</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
.disposition {
  .title_top {
    width: 21.875rem;
    height: 3.5rem;
    padding:0 4rem;
    background: url(../../../assets/img/comprehensive/components/5.png) no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
  }
  .supervise_tc_c {
    margin: 0 auto;
    width: 90%;
    height: 92%;
  }
  .bg_popout {
    background-image: url(../../../assets/img/comprehensive/components/bg_pop.png);
    background-size: 100% 100%;
  }
  .tb_list {
    margin: 0 5rem;
    background-image: url(../../../assets/img/comprehensive/components/15.png);
    background-size: 100% 100%;
  }
  .tb_list li,.tb_lists li {
   padding: 1.5rem 0 1.5rem 2rem;
  }
  .tb_lists:nth-child(even) {
    background-image: url(../../../assets/img/comprehensive/components/16.png);
    background-size: 100% 100%;
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .superviseList::-webkit-scrollbar {
    width: 0;
  }
  .superviseClose {
    position: absolute;
    right: 10%;
    top: 8.5%;
  }
}
</style>
